<template>
  <div class="class-table">
    <div class="top-select">
      <el-select v-model="semester" placeholder="学期" @change="handleSemesterChange">
        <el-option
          v-for="item in semesterOptions"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <el-select v-model="classroomNo" placeholder="教室" @change="handleClassroomChange">
        <el-option
          v-for="item in classroomOptions"
          :key="item.classroomNo"
          :label="item.classroomName"
          :value="item.classroomNo"
        ></el-option>
      </el-select>
    </div>

    <div class="table-wrapper">
      <div class="tabel-container">
        <table>
          <thead>
            <tr>
              <th>时间</th>
              <th v-for="(weekNum, weekIndex) in scheduleData.courses.length" :key="weekIndex">
                {{ "周" + digital2Chinese(weekIndex + 1, "week") }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(lesson, lessonIndex) in scheduleData.lessons" :key="lessonIndex">
              <td>
                <p>{{ "第" + digital2Chinese(lessonIndex + 1) + "节" }}</p>
                <p class="period">{{ lesson }}</p>
              </td>
              <td v-for="(course, courseIndex) in scheduleData.courses" :key="courseIndex">
                {{ scheduleData.courses[courseIndex][lessonIndex] || "-" }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ClassroomSchedule",
  data() {
    return {
      semester: "",
      classroomNo: "",
      semesterOptions: [],
      classroomOptions: [],
      scheduleData: {
        lessons: [
          "07.20-8.55",
          "9.10-10.45",
          "11.00-12.35",
          "14.20-15.55",
          "16.10-17.45"
        ],
        courses: [[], [], [], [], []]
      }
    };
  },
  mounted() {
    this.getSemesters();
    this.getClassrooms();
  },
  methods: {
    // 获取学期列表
    getSemesters() {
      this.$axios.get("http://localhost:8080/semester")
        .then(res => {
          if (res.data.code === 0) {
            this.semesterOptions = res.data.data;
            if (this.semesterOptions.length > 0) {
              this.semester = this.semesterOptions[0];
            }
          }
        })
        .catch(error => {
          this.$message.error("获取学期列表失败");
        });
    },

    // 获取教室列表
    getClassrooms() {
      this.$axios.get("http://localhost:8080/classroom/all")
        .then(res => {
          if (res.data.code === 0) {
            this.classroomOptions = res.data.data;
            if (this.classroomOptions.length > 0) {
              this.classroomNo = this.classroomOptions[0].classroomNo;
            }
          }
        })
        .catch(error => {
          this.$message.error("获取教室列表失败");
        });
    },

    // 学期变更处理
    handleSemesterChange() {
      if (this.classroomNo) {
        this.getSchedule();
      }
    },

    // 教室变更处理
    handleClassroomChange() {
      if (this.semester) {
        this.getSchedule();
      }
    },

    // 获取课表数据
    getSchedule() {
      this.$axios.get(`http://localhost:8080/classroom-schedule/${this.semester}/${this.classroomNo}`)
        .then(res => {
          if (res.data.code === 0) {
            const courseData = res.data.data;
            console.log('获取到的课表数据:', courseData);
            
            // 重置课表数据
            this.scheduleData.courses = [[], [], [], [], []];
            
            // 填充课表数据
            courseData.forEach(item => {
              console.log('处理课程项:', item);
              const weekDay = parseInt(item.weekDay); // 直接使用weekDay作为星期几
              const classTime = parseInt(item.classTime.substring(0, 1)) - 1; // 从"06"中提取第一个数字作为节数
              
              console.log('星期:', weekDay, '节数:', classTime);
              
              if (weekDay >= 0 && weekDay < 5 && classTime >= 0 && classTime < 5) {
                this.scheduleData.courses[weekDay][classTime] = item.displayName;
                console.log('设置课程:', weekDay, classTime, item.displayName);
              }
            });
            
            console.log('处理后的课表数据:', this.scheduleData.courses);
            this.$message.success("获取课表成功");
          }
        })
        .catch(error => {
          console.error('获取课表失败:', error);
          this.$message.error("获取课表失败");
        });
    },

    // 数字转中文
    digital2Chinese(num, identifier) {
      const character = ['零', '一', '二', '三', '四', '五', '六', '日'];
      return character[num];
    }
  }
};
</script>

<style lang="less" scoped>
.class-table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

.top-select {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  
  .el-select {
    width: 200px;
  }
}

.table-wrapper {
  flex: 1;
  overflow: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.tabel-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  
  table {
    width: 100%;
    border-collapse: collapse;
    
    th, td {
      border: 1px solid #EBEEF5;
      padding: 12px;
      text-align: center;
      font-size: 14px;
      color: #606266;
    }
    
    th {
      background-color: #F5F7FA;
      font-weight: 500;
    }
    
    td {
      p {
        margin: 0;
        line-height: 1.5;
        
        &.period {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
}

.el-select {
  .el-input__inner {
    height: 40px;
    line-height: 40px;
  }
}
</style> 